<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="test"></div>
    <script src="../lib//react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.min.js"></script>
    <script src="../lib/prop-types.js"></script>
    <script type="text/babel">
        // 组件生命周期
        class LifeCycle extends React.Component {
            state = {opacity:1}

            // 每次修改都会被调用
            render() {
                // const timer = setInterval(()=>{
                //     let {opacity} = this.state
                //     if(opacity <= 0){
                //         opacity = 1
                //     }else{
                //         opacity -= 0.1
                //     }
                //     console.log(1 )
                //     clearInterval(timer)
                //     // 改了 state 继续调用 render
                //     this.setState({opacity})
                // },200)
                return (
                    <div>
                        <h1 style={{opacity:this.state.opacity}}>测试文字</h1>
                        <button onClick={this.onClick}>unMount</button>
                    </div>
                )
            }
            // 挂载完毕只会调用一次
            componentDidMount(){
                this.timer = setInterval(()=>{
                    let {opacity} = this.state
                    if(opacity <= 0){
                        opacity = 1
                    }else{
                        opacity -= 0.1
                    }
                    console.log(1 )
                    this.setState({opacity})
                },200)
            }
            // 卸载前
            componentWillUnmount(){
                clearInterval(this.timer)
            }
            onClick = ()=>{
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
        }
        ReactDOM.render(<LifeCycle />, document.getElementById('test'))
    </script>
</body>

</html>